<template>
  <div class="top-selling">
    <a v-for="(top, index) of tops" :key="index" class="wrap-top" :href="url+'/group_view.htm?id='+top.id">
      <div class="top-list">
        <span>{{top.time}}</span>
        <i class="image"><img class="split" src="../assets/img/split.png"></i>
        <i class="image"><img class="picture" :src="url+top.img"></i>
        <span class="title">{{top.name}}</span>
      </div>
    </a>
  </div>
</template>

<script>
  export default{
    name: 'topSelling',
    props: ['tops'],
    data () {
      return {
        url: 'http://www.finewest.cn'
      }
    }
  }
</script>

<style scope lang="scss">
  .wrap-top{
    width: 100%;
    overflow: hidden;
    display: block;
  }
  .top-selling{
    background-color: #ffffff;
    margin-bottom: 4px;
    .top-list{
      display: flex;
      margin: 0 11px;
      span{
        line-height: 33px;
        font-size: 10px;
        color: #000000;
        &.title{
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      i{
        height: 33px;
        line-height: 33px;
        img{
          vertical-align: middle;
          &.split{
             height: 24px;
             margin: 0 15px;
           }
          &.picture{
             margin-right: 15px;
             width: 24px;
             height: 24px;
             border-radius: 50%;
           }
        }
      }
    }
  }
</style>
